<style lang="less">
.order-admin {
  min-height: 100%; 
  background: #fff;
  box-sizing: border-box;
  padding: 24px 24px 48px;
  position: relative;
  &__number {
    color: #59595e;
  }
  &__operation {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .operation__tip {
      color: #bfbfbf;
      font-size: 14px;
      //   margin-left: 16px;
    }
  }
  &__table {
    .arco-table-tr {
    }
    .table__dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 8px;
      &--green {
        background: #38ca29;
      }
      &--red {
        background: #ff3c3c;
      }
    }
  }
  &__pagination {
    border-top: 1px solid #f1f1f1;
    height: 48px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
  }
}
</style>

<template>
  <div class="order-admin">
    <div class="order-admin__operation">
      <div class="operation__left">
        <span class="operation__tip">
          （全部数据共<span class="order-admin__number">{{total}}</span>条）
        </span>
      </div>
      <div class="operation__right">
        <a-range-picker v-model="searchTime" value-format="timestamp" :style="{ width: '229px', marginRight: '12px' }" @change="onTimeRangePickerChange"/>
        <a-input-search
          v-model="userSearchText"
          :style="{ width: '243px' }"
          placeholder="搜索手机号/用户ID/用户名"
		  allow-clear
          @search="onSearchClick"
        />
      </div>
    </div>
    <a-scrollbar style="overflow: auto">
      <a-table
        class="design__table order-admin__table"
        :columns="orderAdminColumns"
        :data="orderAdminData"
        :pagination="false"
      >
        <template #invoiceStatus="{ record }">
          <span
            class="table__dot"
            :class="[
              +record.invoiceStatus === 1 ? 'table__dot--green' : '',
              +record.invoiceStatus === 0 ? 'table__dot--red' : '',
            ]"
          >
          </span>
          <span>{{ invoicingStatusMaps[record.invoiceStatus] }}</span>
        </template>
        <template #amount="{ record }">
          {{ record.amount / 100 }}
        </template>
      </a-table>
    </a-scrollbar>
    <div class="order-admin__pagination">
      <a-pagination
        :total="total"
        @change="getOrderList"
        v-model:current="current"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { order } from "@/api";
import { number } from "echarts";
import dateFormat from 'ourwill-feutil/common/dateFormat'

const invoicingStatusMaps: any = {
  0: "未开票",
  1: "已开票",
};
const orderAdminColumns: any = [
  {
    title: "订单编号",
    dataIndex: "orderNo",
    width: 157,
  },
  {
    title: "购买时间",
    dataIndex: "createTime",
    width: 170,
	render(data: { record: { createTime: string | number | Date; }; }) {
		return dateFormat(data.record.createTime)
	}
  },
  {
    title: "昵称",
    dataIndex: "nickname",
    width: 116,
  },
  {
    title: "手机号",
    dataIndex: "mobPhone",
    width: 156,
  },
  {
    title: "用户名",
    dataIndex: "username",
    width: 150,
  },
  {
    title: "用户ID",
    dataIndex: "userId",
    width: 80,
  },
  {
    title: "购买类型",
    dataIndex: "description",
    width: 150,
  },

  {
    title: "付款金额",
    dataIndex: "amount",
    slotName: "amount",
    width: 150,
  },
  {
    title: "开票状态",
    dataIndex: "invoiceStatus",
    slotName: "invoiceStatus",
    width: 173,
  },
];
const orderAdminData = ref([]);
const total = ref<number>(0);
const current = ref<number>(1);
const searchTime = ref(['', '']);
const userSearchText = ref<string | number>('');
const onSearchClick = () => {
	current.value = 1
	getOrderList()
}
const onTimeRangePickerChange = () => {
	current.value = 1
	getOrderList()
}
const getOrderList = async () => {
  if(!searchTime.value) {
    searchTime.value = ['', ''];
  }
  const params = {
    pageNum: current.value,
    pageSize: 10,
    userSearchText: userSearchText.value,
    startTime: searchTime.value[0],
    endTime: searchTime.value[1],
  };
  const { ok, data } = await order.getOrderList(params);
  if (!ok) return;
  orderAdminData.value = data.data.records;
  total.value = data.data.total;
};
onMounted(() => {
  getOrderList();
});
</script>
